
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: red;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    
    <script>
            //设置两个五角星
            var wjxm = "★";
            var wjxk = "☆";
            //需求1: 鼠标进入哪个li，让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            //需求2: 鼠标移开当前li，让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            //需求3: 鼠标点击哪个li，这个li就变成别记录的五角星，然后设置一个类名，方便下次获取，其他的去掉类名；
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>

</html>
